<template>
	<view class="content">
		<view class="title" style="margin-top: 100rpx;">你的标签是？</view>
		<view class="cell">
			<view class="label">自我描述</view>
			<view class="cell-item">
				<view class="tag" :class="{'selected':item.isselect}" v-for="(item, index) in gxTags"
					@click="onItemClick(item, index)">{{item.name}}</view>
			</view>
		</view>

		<view class="cell">
			<view class="label">兴趣爱好</view>
			<view class="cell-item">
				<view class="tag" :class="{'selected':item.isselect}" v-for="(item, index) in xqTags"
					@click="onItemClick(item, index)">{{item.name}}</view>
			</view>
		</view>

		<zy-register-bottom top='60rpx' @next='next'></zy-register-bottom>
	</view>
</template>

<script>
	import RouteUtil from '@/main/common/RouteUtil.js';
	import CacheUtil from '@/main/common/CacheUtil';
	export default {
		data() {
			return {
				gxTags: [],
				xqTags: [],
				data: {},
			};
		},
		onLoad() {
			this.data = CacheUtil.getRegisterUser();
			this.requestDict();
		},

		methods: {
			next() {
				this.requestSave();
			},
			async requestDict() {
				uni.$http.get("/api/dict/detail").then(res => {
					let data = res.data.dictTagResult;
					let tags = [];
					if (this.tagIds) {
						tags = this.tagIds.split(',')
					}
					data.dictTagHobbyResultList.forEach(item => {
						let flag = false;
						if (tags && tags.length > 0) {
							tags.forEach(tag => {
								if (item.id == tag) {
									flag = true;
								}
							})
						}
						item.isselect = flag;
					})
					data.dictTagPersonalityResultList.forEach(item => {
						let flag = false;
						if (tags && tags.length > 0) {
							tags.forEach(tag => {
								if (item.id == tag) {
									flag = true;
								}
							})
						}
						item.isselect = flag;
					})
					this.gxTags = data.dictTagHobbyResultList;
					this.xqTags = data.dictTagPersonalityResultList;
				})
			},
			requestSave() {
				let ids = '';
				this.gxTags.forEach(item => {
					if (item.isselect) {
						if ('' == ids) {
							ids = item.id;
						} else {
							ids += ',' + item.id;
						}
					}
				})
				this.xqTags.forEach(item => {
					if (item.isselect) {
						if ('' == ids) {
							ids = item.id;
						} else {
							ids += ',' + item.id;
						}
					}
				})

				if ('' == ids) {
					uni.$toast.showToast('请选择')
					return
				}

				this.data.tagIds = ids

				uni.$http.updateUser(this.data).then(res => {
					uni.$toast.showToast('完善信息成功，欢迎进入')
					setTimeout(() => {
						CacheUtil.setLogin()
						RouteUtil.toHome()
					}, 500)
				})
			},
			onItemClick(item, index) {
				item.isselect = !item.isselect;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 100wh;
		height: 100vh;
		margin: 0 50rpx;

		.title {
			font-weight: bold;
			font-size: 48rpx;
			color: #222;
		}


		.cell {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 15rpx;
			padding: 20rpx;
			margin: 20rpx;

			.label {
				font-size: 36rpx;
				color: #222;
			}

			.cell-item {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.tag {
					padding: 10rpx 20rpx;
					background-color: #eee;
					border-radius: 50rpx;
					font-size: 24rpx;
					color: #555;
					margin: 10rpx;
				}

				.selected {
					background-color: #009fff;
					color: #fff;
				}
			}

		}


	}
</style>